import { defineComponent, h , ref} from "@vue/runtime-core";
import mapImg from "../assets/map.jpg";
import { game } from "../Game"

export default defineComponent({

      setup(){
            const windowHeight = 1080;
            let mapY1 = ref(0);
            let mapY2 = ref(-windowHeight);
            const step = 5;
            game.ticker.add(() => { 
                  mapY1.value += step;
                  mapY2.value += step;


                  if(mapY1.value >= windowHeight){
                        mapY1.value = -windowHeight;
                  }

                  if(mapY2.value >= windowHeight){
                        mapY2.value = -windowHeight;
                  }
            })

            return {mapY1, mapY2}

      },

      render(ctx) {
            return h("Container", [h("Sprite", {
                  texture: mapImg, 
                  y: ctx.mapY1,
                  x:0
            }), h("Sprite", {
                  texture: mapImg, 
                  y: ctx.mapY2,
                  x:0
            })]);
      },
});
